{template 'common/header'}
<link rel="stylesheet" href="{$_W['siteroot']}/addons/redpacket/static/assets/owl.carousel.min.css">
<link rel="stylesheet" href="{$_W['siteroot']}/addons/redpacket/static/assets/owl.theme.default.min.css">
<script type="text/javascript" src="{$_W['siteroot']}/addons/redpacket/static/owl.carousel.min.js"></script>

<style>
    .activity-left{float:left;width: 30%;}
    .activity-right{float:left;margin-left:10px;width:67%}
    .avatar{width:60px; border-radius: 5px;}
</style>
<div class="activity-left">

    <ul class="list-group">
        <li class="list-group-item">
            已报名人员
        </li>
        {loop $fans $fs}
        <li class="list-group-item">
            <img class="avatar" src="{$fs['avatar']}">
            <span>{$fs['nickname']}</span>
        </li>
        {/loop}
    </ul>

</div>
<div class="activity-right">
<div>{$activity['activity_name']} 开始时间:{php echo date('Y-m-d H:i:s', $activity['starttime'])}</div>
<div>奖品</div>
<div>
    <div class="owl-carousel owl-theme">
        <?php shuffle($fans);?>
        {loop $fans $fs}
        <div class="item">
            <img class="avatar" src="{$fs['avatar']}">
            <span>{$fs['nickname']}</span>
        </div>
        {/loop}

    </div>
    <a class="button secondary play">Play</a>
    <a class="button secondary stop">Stop</a>
</div>
</div>
<script>


    $(document).ready(function() {
        var owl = $('.owl-carousel');
        owl.owlCarousel({
            items: 4,
            loop: true,
            margin: 10,
            autoplay: true,
            autoplayTimeout: 300,
            autoplayHoverPause: true
        });
        $('.play').on('click', function() {
            owl.trigger('play.owl.autoplay', [300])
        })
        $('.stop').on('click', function() {
            owl.trigger('stop.owl.autoplay')
        })
    })
</script>
</body>
</html>